
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>2、Servlet应用 - 学习卡片</title>
      <style>
        body { font-family: sans-serif; background-color: #f0f8ff; color: #333; display: flex; flex-direction: column; align-items: center; padding: 50px 20px; }
        .header h1 { font-size: 32px; }
        .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; width: 100%; max-width: 1200px; }
        .card-container { perspective: 1200px; cursor: pointer; height: 250px; }
        .card { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.7s; border-radius: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
        .card-container.flipped .card { transform: rotateY(180deg); }
        .card-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; flex-direction: column; box-sizing: border-box; border-radius: 16px; background-color: #fff; padding: 24px; }
        .card-back { background-color: #f0fff4; transform: rotateY(180deg); justify-content: space-between; }
        .card-category { font-size: 14px; color: #0052d9; margin-bottom: 8px; font-weight: 500; }
        .card-question { font-size: 20px; font-weight: 500; flex-grow: 1; display: flex; align-items: center; justify-content: center; text-align: center; }
        .card-answer-wrapper { flex-grow: 1; overflow-y: auto; }
        .card-answer { font-size: 15px; line-height: 1.7; }
        .card-footer { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 16px; margin-top: 16px; }
        .card-source { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 12px; margin-top: 12px; }
      </style>
    </head>
    <body>
      <div class="header">
        <h1>2、Servlet应用 - 学习卡片</h1>
      </div>
      <div class="grid-container">
        
    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">在Servlet中，如何实现一个页面在指定秒数后自动跳转到另一个页面？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">通过设置response对象的HTTP头来实现定时跳转。具体代码为：`response.setHeader("refresh", "3;url=login.html");`，这会让浏览器在3秒后跳转到`login.html`页面。</div>
          </div>
          <div class="card-source">来源: 注册功能</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">机制</div>
          <div class="card-question">什么是请求重定向（Request Redirection）？它的核心特征是什么？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">机制</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">请求重定向指一个Web资源收到客户端请求后，通知客户端去访问另一个Web资源。其核心特征是浏览器地址栏会发生改变，并且整个过程会发送两次独立的HTTP请求。</div>
          </div>
          <div class="card-source">来源: 重定向</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">理论</div>
          <div class="card-question">Web服务器在处理客户端的每一次HTTP请求时，会创建哪两个核心对象来分别代表请求和响应？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">理论</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">Web服务器会针对每一次请求，分别创建一个用于代表请求的request对象和代表响应的response对象。</div>
          </div>
          <div class="card-source">来源: request&response</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">在处理表单提交时，如何分别解决POST请求和GET请求中的中文乱码问题？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">对于POST请求，可以通过 `request.setCharacterEncoding("UTF-8");` 来解决。对于GET请求，则需要对获取的参数进行手动重新编码，例如：`new String(username.getBytes("ISO-8859-1"),"UTF-8");`。</div>
          </div>
          <div class="card-source">来源: request常见应用</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">机制</div>
          <div class="card-question">请简述请求重定向的四个主要步骤。</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">机制</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">1. 用户浏览器请求访问服务器的某个组件。 2. 该组件返回一个状态码为302的响应。 3. 浏览器收到302响应后，立即自动请求访问另一个指定的Web组件。 4. 浏览器最终接收并显示第二个组件返回的响应结果。</div>
          </div>
          <div class="card-source">来源: 重定向</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">特性</div>
          <div class="card-question">HttpServletRequest对象封装了哪些信息？它有什么作用？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">特性</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">HttpServletRequest对象代表客户端的请求，当客户端通过HTTP协议访问服务器时，HTTP请求头中的所有信息都封装在这个对象中。开发人员可以通过它提供的方法来获取客户端的各种信息。</div>
          </div>
          <div class="card-source">来源: Request的应用补充</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">在Java中生成验证码图片通常需要使用哪些核心的API类？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">生成验证码主要涉及三个核心类：`BufferedImage`用于在内存中创建图像，`Graphics`作为画笔在图像上进行绘制，`ImageIO`则用于将最终生成的图像输出到客户端。</div>
          </div>
          <div class="card-source">来源: 验证码</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">如何使用request对象获取客户端发出请求时的完整URL和客户端的IP地址？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">可以使用`getRequestURL()`方法返回客户端发出请求时的完整URL，使用`getRemoteAddr()`方法返回发出请求的客户机的IP地址。</div>
          </div>
          <div class="card-source">来源: request方法</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">当需要在Cookie中存储中文字符时，应该如何处理以避免乱码问题？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">为了避免乱码，应该在将中文字符串存入Cookie前对其进行URL编码。文档中给出的示例代码是：`URLEncoder.encode(username, "utf-8")`。</div>
          </div>
          <div class="card-source">来源: 登录功能</div>
        </div>
      </div>
    </div>

      </div>
    </body>
    </html>
